<template>
    <view class="flex justify-center items-center bg-gray-100 h-24 w-40 rounded overflow-hidden"
        :style="{ width: width + 'rpx', height: height + 'rpx' }" @tap="chooseImage">
        <u-icon name="photo" size="36" v-if="!currentUrl"></u-icon>
        <image v-else :src="currentUrl" width="100%" height="100%" mode="widthFix"></image>
    </view>
</template>
<script lang="ts" setup>
import { ref, watch } from 'vue';

let props = withDefaults(defineProps<{
    width: number
    height: number
    modelValue?: string
}>(), {
});
let emit = defineEmits(['update:modelValue']);
let currentUrl = ref(props.modelValue)
watch(() => currentUrl.value, () => {
    emit('update:modelValue', currentUrl.value)
})
function chooseImage() {
    uni.chooseMedia({
        count: 1,
        success: (res) => {
            currentUrl.value = res.tempFiles[0].tempFilePath
        }
    })

}

</script>
<style lang="scss">
l-upload {
    @apply block;
}
</style>